<template>
  <ele-modal width="1100" :model-value="modelValue" :show-close="false" :modal="true" title="批量打印核对单"
             @update:modelValue="updateModelValue">
    <el-divider style="margin-top: 10px;margin-bottom: 10px;"></el-divider>
    <ele-loading :loading="loading" text="正在加载打印机" type="dot">
      <el-form :inline="true" :model="printerList" class="demo-form-inline">
        <el-form-item label="打印机">
          <el-select v-model="defaultPrinter" placeholder="请选择打印机" style="width: 350px;">
            <el-option v-for="(item,index) in printerList" :label="item" :value="item" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goPrint">打印</el-button>
        </el-form-item>
      </el-form>
    </ele-loading>
    <el-divider style="margin-top: 10px;margin-bottom: 10px;"></el-divider>


    <div class="main-container">
      <div ref="titleRegion">
        <div class="title">
          <strong v-if="props.data">福州大学至诚学院{{ props.data.graduationYear }}届毕业生信息核对单</strong>
        </div>
        <div style="text-align:right;width: 1040px;padding-right:80px;">辅导员签字：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
      </div>
      <div id="tablediv" ref="tableRegion">
        <table id="datatable">
          <thead>
          <tr>
            <td style="width:50px;"><strong>序号</strong></td>
            <td><strong>姓名</strong></td>
            <td><strong>学号</strong></td>
            <td><strong>性别</strong></td>
            <td><strong>民族</strong></td>
            <td><strong>专业</strong></td>
            <td style="width:190px;"><strong>身份证号</strong></td>
            <td><strong>生源地<small>(高考时户口所在地)</small></strong></td>
            <td><strong>签字确认</strong></td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in studentList" :key="index">
            <td style="width:50px;vertical-align:middle;" valign="middle">
              {{ index + 1 }}
            </td>
            <td style="vertical-align:middle;">
              {{ item.name }}<span v-if="item.studentRecommendSubmit == 0">·</span>
            </td>
            <td style="vertical-align:middle;">
              {{ item.code }}<span v-if="item.counselorRecommendCheck == 0">·</span>
            </td>
            <td>{{ item.sex }}</td>
            <td>{{ item.nation }}</td>
            <td>{{ item.major }}</td>
            <td>
              <div style="width:190px;">{{ item.idNumber }}</div>
            </td>
            <td>{{ item.source }}</td>
            <td></td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <td style="text-align: center" colspan="2"><b>合计</b></td>
            <td style="text-align: center" colspan="4"><b>{{ studentList.length }}</b></td>
            <td tdata="pageNO" format="#" align="left">
              <p align="center"><b>第<span color="#0000FF">#</span>页</b></p>
            </td>
            <td colspan="2" tdata="pageCount" format="#" align="left">
              <p align="center"><b>总<span color="#0000FF">##</span>页</b></p>
            </td>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <el-divider/>
    <div style="text-align: center;">
      <el-button @click="updateModelValue(false)">关闭</el-button>
      <el-button type="primary" @click="goPrint()">打印</el-button>
    </div>
  </ele-modal>
</template>


<script setup>
import {getLodop} from "@/assets/js/LodopFuncs";
import {ref, reactive, watch, onMounted} from 'vue';
import {selectCheckTableList} from '@/api/manage/recommend/admin/index.js';

const emit = defineEmits(['done', 'update:modelValue']);


const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object
});
/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};


const titleRegion = ref(null);
const tableRegion = ref(null);

const goPrint = () => {

  let titleRegionHtml = titleRegion.value.innerHTML;
  let tableRegionHtml = tableRegion.value.innerHTML;

  let LODOP = getLodop()//调用getLodop获取LODOP对象
  let strStyleCSS = "<!DOCTYPE html><html><head><style type=\"text/css\">" + printStyle.value + "</style></head>";//添加样式
  LODOP.PRINT_INIT("打印学生信息复核表");
  //let sign = '<div style="text-align:right;width: 1040px;">辅导员签字：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>';
  let htmlEnd = "</html>";
  LODOP.ADD_PRINT_HTM(20, 0, "1040px", "120px", strStyleCSS + titleRegionHtml + htmlEnd);
  LODOP.SET_PRINT_STYLEA(0, "Horient", 2);//水平垂直居中
  LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);//，每页都输出


  LODOP.ADD_PRINT_TABLE(0, 0, "1040px", "550px", strStyleCSS + '<div id="tablediv">' + tableRegionHtml + '</div>' + htmlEnd);
  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4");//设置纸张样式，横向，A4
  LODOP.SET_PRINT_STYLEA(0, "Horient", 2);//水平垂直居中
  LODOP.SET_PRINT_STYLEA(0, "Vorient", 2);//水平垂直居中

  LODOP.SET_PRINT_MODE("PRINT_DEFAULTSOURCE", 7);//设置纸盒 7-自动
  LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1);//横向时的正向显示
  LODOP.PREVIEW();
}


const printerList = ref([]);
const defaultPrinter = ref('');

const initPrinterList = () => {
  let LODOP = getLodop()//调用getLodop获取LODOP对象
  //初始化打印机列表
  let printCount = LODOP.GET_PRINTER_COUNT();//获取打印机数量
  for (let i = 0; i < printCount; i++) {
    printerList.value.push(LODOP.GET_PRINTER_NAME(i));
  }
  defaultPrinter.value = LODOP.GET_PRINTER_NAME(-1);//获取默认打印机
}

const studentList = ref([]);

const initList = () => {
  //初始化列表
  selectCheckTableList(props.data).then(res => {
    studentList.value = res.data;
    console.log(res.data);
  });
};

const printStyle = ref(`
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.main-container {
  width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.title {
  width: 1040px;
  font-family: 'Microsoft YaHei';
  font-size: 35px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-family: 微软雅黑;
}

#datatable {
  width: 1040px;
  font-family: 'Microsoft YaHei';
}

#datatable thead tr {
}

#datatable thead tr td {
  height: 35px;
  border: 1px solid #000000;
  font-size: 16px;
  text-align: center;
}

#datatable tbody tr {
}

#datatable tbody tr td {
  border: 1px solid #000000;
  font-size: 14px;
  text-align: center;
  height: 40px;
  vertical-align: top;
}

#datatable tfoot {
}

#datatable tfoot tr {
}

#datatable tfoot tr td {
  height: 35px;
  /*height: 20px;*/
  border: 1px solid #000000;
  font-size: 13px;
  /*text-align: center;*/
}
`);
const loading = ref(false);
onMounted(() => {
  loading.value = true;
  //加载学生信息
  initList();
  //延迟1.5秒再执行
  setTimeout(function () {
    loading.value = false;
    initPrinterList();
  }, 1000); // 1500毫秒后执行

  //注册样式
  const style = document.createElement('style');
  style.innerHTML = printStyle.value;
  document.head.appendChild(style);
});


</script>

<!--<style scoped>-->
<!--table {-->
<!--  border-collapse: collapse;-->
<!--  border-spacing: 0;-->
<!--}-->

<!--.main-container {-->
<!--  width: 1040px;-->
<!--  margin-left: auto;-->
<!--  margin-right: auto;-->
<!--}-->

<!--.title {-->
<!--  width: 1040px;-->
<!--  font-family: 'Microsoft YaHei';-->
<!--  font-size: 35px;-->
<!--  height: 60px;-->
<!--  line-height: 60px;-->
<!--  text-align: center;-->
<!--  font-family: 微软雅黑;-->
<!--}-->

<!--#datatable {-->
<!--  width: 1040px;-->
<!--  font-family: 'Microsoft YaHei';-->
<!--}-->

<!--#datatable thead tr {-->
<!--}-->

<!--#datatable thead tr td {-->
<!--  height: 35px;-->
<!--  border: 1px solid #000000;-->
<!--  font-size: 16px;-->
<!--  text-align: center;-->
<!--}-->

<!--#datatable tbody tr {-->
<!--}-->

<!--#datatable tbody tr td {-->
<!--  border: 1px solid #000000;-->
<!--  font-size: 14px;-->
<!--  text-align: center;-->
<!--  height: 40px;-->
<!--  vertical-align: top;-->
<!--}-->

<!--#datatable tfoot {-->
<!--}-->

<!--#datatable tfoot tr {-->
<!--}-->

<!--#datatable tfoot tr td {-->
<!--  height: 35px;-->
<!--  /*height: 20px;*/-->
<!--  border: 1px solid #000000;-->
<!--  font-size: 13px;-->
<!--  /*text-align: center;*/-->
<!--}-->
<!--</style>-->
